.dh-button {
    --dh-button-font-weight: var(--dh-font-weight-primary);
    --dh-button-border-color: var(--dh-border-color);
    --dh-button-bg-color: var(--dh-fill-color-blank);
    --dh-button-text-color: var(--dh-text-color-regular);
    --dh-button-disabled-text-color: var(--dh-disabled-text-color);
    --dh-button-disabled-bg-color: var(--dh-fill-color-blank);
    --dh-button-disabled-border-color: var(--dh-border-color-light);
    --dh-button-hover-text-color: var(--dh-color-primary);
    --dh-button-hover-bg-color: var(--dh-color-primary-light-9);
    --dh-button-hover-border-color: var(--dh-color-primary-light-7);
    --dh-button-active-text-color: var(--dh-button-hover-text-color);
    --dh-button-active-border-color: var(--dh-color-primary);
    --dh-button-active-bg-color: var(--dh-button-hover-bg-color);
    --dh-button-outline-color: var(--dh-color-primary-light-5);
    --dh-button-active-color: var(--dh-text-color-primary);
  }
  .dh-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    height: 32px;
    white-space: nowrap;
    cursor: pointer;
    color: var(--dh-button-text-color);
    text-align: center;
    box-sizing: border-box;
    outline: none;
    transition: .1s;
    font-weight: var(--dh-button-font-weight);
    user-select: none;
    vertical-align: middle;
    -webkit-appearance: none;
    background-color: var(--dh-button-bg-color);
    border: var(--dh-border);
    border-color: var(--dh-button-border-color);
    padding: 8px 15px;
    font-size: var(--dh-font-size-base);
    border-radius: var(--dh-border-radius-base);
    & + & {
      margin-left: 12px;
    }
    &:hover,
    &:focus {
      color: var(--dh-button-hover-text-color);
      border-color: var(--dh-button-hover-border-color);
      background-color: var(--dh-button-hover-bg-color);
      outline: none;    
    }
    &:active {
      color: var(--dh-button-active-text-color);
      border-color: var(--dh-button-active-border-color);
      background-color: var(--dh-button-active-bg-color);
      outline: none;
    }
    &.is-plain {
      --dh-button-hover-text-color: var(--dh-color-primary);
      --dh-button-hover-bg-color: var(--dh-fill-color-blank);
      --dh-button-hover-border-color: var(--dh-color-primary);    
    }
    /*round*/
    &.is-round {
      border-radius: var(--dh-border-radius-round);
    }
    /*circle*/
    &.is-circle {
      border-radius: 50%;
      padding: 8px;
    }
    /*disabled*/
    &.is-disabled, &.is-disabled:hover, &.is-disabled:focus, 
    &[disabled], &[disabled]:hover, &[disabled]:focus 
    {
      color: var(--dh-button-disabled-text-color);
      cursor: not-allowed;
      background-image: none;
      background-color: var(--dh-button-disabled-bg-color);
      border-color: var(--dh-button-disabled-border-color);
    }
    [class*=dh-icon] + span {
      margin-left: 6px;
    }
  }
  /* @each $val in primary,success,warning,info,danger { */
    .dh-button--primary {
      --dh-button-text-color: var(--dh-color-white);
      --dh-button-bg-color: var(--dh-color-primary);
      --dh-button-border-color: var(--dh-color-primary);
      --dh-button-outline-color: var(--dh-color-primary-light-5);
      --dh-button-active-color: var(--dh-color-primary-dark-2);
      --dh-button-hover-text-color: var(--dh-color-white);
      --dh-button-hover-bg-color: var(--dh-color-primary-light-3);
      --dh-button-hover-border-color: var(--dh-color-primary-light-3);
      --dh-button-active-bg-color: var(--dh-color-primary-dark-2);
      --dh-button-active-border-color: var(--dh-color-primary-dark-2);
      --dh-button-disabled-text-color: var(--dh-color-white);
      --dh-button-disabled-bg-color: var(--dh-color-primary-light-5);
      --dh-button-disabled-border-color: var(--dh-color-primary-light-5);
    }
    .dh-button--primary.is-plain {
      --dh-button-text-color: var(--dh-color-primary);
      --dh-button-bg-color: var(--dh-color-primary-light-9);
      --dh-button-border-color: var(--dh-color-primary-light-5);
      --dh-button-hover-text-color: var(--dh-color-white);
      --dh-button-hover-bg-color: var(--dh-color-primary);
      --dh-button-hover-border-color: var(--dh-color-primary);
      --dh-button-active-text-color: var(--dh-color-white);
    }


    .dh-button--success {
        --dh-button-text-color: var(--dh-color-white);
        --dh-button-bg-color: var(--dh-color-success);
        --dh-button-border-color: var(--dh-color-success);
        --dh-button-outline-color: var(--dh-color-success-light-5);
        --dh-button-active-color: var(--dh-color-success-dark-2);
        --dh-button-hover-text-color: var(--dh-color-white);
        --dh-button-hover-bg-color: var(--dh-color-success-light-3);
        --dh-button-hover-border-color: var(--dh-color-success-light-3);
        --dh-button-active-bg-color: var(--dh-color-success-dark-2);
        --dh-button-active-border-color: var(--dh-color-success-dark-2);
        --dh-button-disabled-text-color: var(--dh-color-white);
        --dh-button-disabled-bg-color: var(--dh-color-success-light-5);
        --dh-button-disabled-border-color: var(--dh-color-success-light-5);
      }
      .dh-button--success.is-plain {
        --dh-button-text-color: var(--dh-color-success);
        --dh-button-bg-color: var(--dh-color-success-light-9);
        --dh-button-border-color: var(--dh-color-success-light-5);
        --dh-button-hover-text-color: var(--dh-color-white);
        --dh-button-hover-bg-color: var(--dh-color-success);
        --dh-button-hover-border-color: var(--dh-color-success);
        --dh-button-active-text-color: var(--dh-color-white);
      }

      .dh-button--warning {
        --dh-button-text-color: var(--dh-color-white);
        --dh-button-bg-color: var(--dh-color-warning);
        --dh-button-border-color: var(--dh-color-warning);
        --dh-button-outline-color: var(--dh-color-warning-light-5);
        --dh-button-active-color: var(--dh-color-warning-dark-2);
        --dh-button-hover-text-color: var(--dh-color-white);
        --dh-button-hover-bg-color: var(--dh-color-warning-light-3);
        --dh-button-hover-border-color: var(--dh-color-warning-light-3);
        --dh-button-active-bg-color: var(--dh-color-warning-dark-2);
        --dh-button-active-border-color: var(--dh-color-warning-dark-2);
        --dh-button-disabled-text-color: var(--dh-color-white);
        --dh-button-disabled-bg-color: var(--dh-color-warning-light-5);
        --dh-button-disabled-border-color: var(--dh-color-warning-light-5);
      }
      .dh-button--warning.is-plain {
        --dh-button-text-color: var(--dh-color-warning);
        --dh-button-bg-color: var(--dh-color-warning-light-9);
        --dh-button-border-color: var(--dh-color-warning-light-5);
        --dh-button-hover-text-color: var(--dh-color-white);
        --dh-button-hover-bg-color: var(--dh-color-warning);
        --dh-button-hover-border-color: var(--dh-color-warning);
        --dh-button-active-text-color: var(--dh-color-white);
      }


      .dh-button--info {
        --dh-button-text-color: var(--dh-color-white);
        --dh-button-bg-color: var(--dh-color-info);
        --dh-button-border-color: var(--dh-color-info);
        --dh-button-outline-color: var(--dh-color-info-light-5);
        --dh-button-active-color: var(--dh-color-info-dark-2);
        --dh-button-hover-text-color: var(--dh-color-white);
        --dh-button-hover-bg-color: var(--dh-color-info-light-3);
        --dh-button-hover-border-color: var(--dh-color-info-light-3);
        --dh-button-active-bg-color: var(--dh-color-info-dark-2);
        --dh-button-active-border-color: var(--dh-color-info-dark-2);
        --dh-button-disabled-text-color: var(--dh-color-white);
        --dh-button-disabled-bg-color: var(--dh-color-info-light-5);
        --dh-button-disabled-border-color: var(--dh-color-info-light-5);
      }
      .dh-button--info.is-plain {
        --dh-button-text-color: var(--dh-color-info);
        --dh-button-bg-color: var(--dh-color-info-light-9);
        --dh-button-border-color: var(--dh-color-info-light-5);
        --dh-button-hover-text-color: var(--dh-color-white);
        --dh-button-hover-bg-color: var(--dh-color-info);
        --dh-button-hover-border-color: var(--dh-color-info);
        --dh-button-active-text-color: var(--dh-color-white);
      }



      .dh-button--danger {
        --dh-button-text-color: var(--dh-color-white);
        --dh-button-bg-color: var(--dh-color-danger);
        --dh-button-border-color: var(--dh-color-danger);
        --dh-button-outline-color: var(--dh-color-danger-light-5);
        --dh-button-active-color: var(--dh-color-danger-dark-2);
        --dh-button-hover-text-color: var(--dh-color-white);
        --dh-button-hover-bg-color: var(--dh-color-danger-light-3);
        --dh-button-hover-border-color: var(--dh-color-danger-light-3);
        --dh-button-active-bg-color: var(--dh-color-danger-dark-2);
        --dh-button-active-border-color: var(--dh-color-danger-dark-2);
        --dh-button-disabled-text-color: var(--dh-color-white);
        --dh-button-disabled-bg-color: var(--dh-color-danger-light-5);
        --dh-button-disabled-border-color: var(--dh-color-danger-light-5);
      }
      .dh-button--danger.is-plain {
        --dh-button-text-color: var(--dh-color-danger);
        --dh-button-bg-color: var(--dh-color-danger-light-9);
        --dh-button-border-color: var(--dh-color-danger-light-5);
        --dh-button-hover-text-color: var(--dh-color-white);
        --dh-button-hover-bg-color: var(--dh-color-danger);
        --dh-button-hover-border-color: var(--dh-color-danger);
        --dh-button-active-text-color: var(--dh-color-white);
      }
  /* } */
  .dh-button--large {
    --dh-button-size: 40px;
    height: var(--dh-button-size);
    padding: 12px 19px;
    font-size: var(--dh-font-size-base);
    border-radius: var(--dh-border-radius-base);
  }
  .dh-button--small {
    --dh-button-size: 24px;
    height: var(--dh-button-size);
    padding: 5px 11px;
    font-size: 12px;
    border-radius: calc(var(--dh-border-radius-base) - 1px);
  }
  
  